// rec
import React, { Component } from "react";
import { Button, Form, Input, Spin, Card, message, Select } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { connect } from "react-redux";
import "./login.css";
import { ALoginAction, TLoginAction, SLoginAction } from "../../action/user";

import Header from "../../components/header";
const { Option } = Select;
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isshow: false,
      isLoading: false,
    };
  }
  handleChange(value) {
    // console.log(`selected ${value}`);
  }
  onFinish = (val) => {
    if (val.user_type === 0) {
      let temp = {
        a_name: val.user_name,
        a_pwd: val.user_pwd,
      };
      this.props
        .ALoginAction(temp)
        .then(() => {
          if (this.props.state.code === 0) {
            message.success("登录成功 ！", 2).then(() => {
              sessionStorage.setItem("token", this.props.state.data.token);
              this.props.history.push("/admin/h");
            });
          } else {
            message.error("用户不存在或密码错误");
          }
        })
        .catch(() => {
          this.setState({ confirmLoading: false });
          message.error("服务器错误");
        });
    } else if (val.user_type === 1) {
      let temp = {
        tch_num: val.user_name,
        tch_pwd: val.user_pwd,
      };
       this.props
         .TLoginAction(temp)
         .then(() => {
           if (this.props.state.code === 0) {
             message.success("登录成功 ！", 2).then(() => {
               sessionStorage.setItem("token", this.props.state.data.token);
               this.props.history.push("/admin");
             });
           } else {
             message.error("用户不存在或密码错误");
           }
         })
         .catch(() => {
           message.error("服务器错误");
         });
    } else {
      let temp = {
        stu_num: val.user_name,
        stu_pwd: val.user_pwd,
      };
       this.props
         .SLoginAction(temp)
         .then(() => {
           if (this.props.state.code === 0) {
             message.success("登录成功 ！", 1).then(() => {
               sessionStorage.setItem("token", this.props.state.data.token);
               this.props.history.push("/admin");
             });
           } else {
             message.error("用户不存在或密码错误");
           }
         })
         .catch(() => {
           message.error("服务器错误");
         });
    }
  };
  render() {
    return (
      <div>
        <Header />
        <div className="login-div">
          <Spin tip="Loading..." spinning={this.state.isLoading}>
            <Card
              title="人工智能虚拟仿真实验平台"
              bordered={true}
              style={{ width: 400 }}
            >
              <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                  remember: true,
                }}
                onFinish={this.onFinish}
              >
                <Form.Item
                  name="user_name"
                  rules={[
                    {
                      required: true,
                      message: "请输入你的账号!",
                    },
                  ]}
                >
                  <Input
                    prefix={<UserOutlined className="site-form-item-icon" />}
                    placeholder="职工号/学号"
                  />
                </Form.Item>
                <Form.Item
                  name="user_pwd"
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  rules={[
                    {
                      required: true,
                      message: "请输入密码!",
                    },
                  ]}
                >
                  <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="密码"
                  />
                </Form.Item>
                <Form.Item
                  name="user_type"
                  rules={[
                    {
                      required: true,
                      message: "请选择角色!",
                    },
                  ]}
                >
                  <Select onChange={this.handleChange} placeholder="选择角色">
                    <Option value={0}>管理员</Option>
                    <Option value={1}>教师</Option>
                    <Option value={2}>学生</Option>
                  </Select>
                </Form.Item>
                <Form.Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    className="login-form-button"
                    block
                  >
                    登录
                  </Button>
                </Form.Item>
              </Form>
            </Card>
          </Spin>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    state: state.user,
  };
};
const actionCreator = { ALoginAction, TLoginAction, SLoginAction };
export default connect(mapStateToProps, actionCreator)(Login);
